import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { Skeleton, Card } from 'antd';
function UserList() {
  const [users, setUsers] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // 添加延迟模拟加载时间
    const fetchUsers = async () => {
      try {
        const response = await axios.get('https://jsonplaceholder.typicode.com/users');
        // 添加 2 秒延迟
        await new Promise(resolve => setTimeout(resolve, 6000));
        setUsers(response.data);
        setLoading(false);
      } catch (error) {
        console.error('加载用户数据出错:', error);
        setLoading(false);
      }
    };

    fetchUsers();
  }, []);

  if (loading) return (
    <div className="user-list">
      {[...Array(6)].map((_, index) => ( 
        <Card key={index} style={{ marginBottom: 16 }}>
          <Skeleton active avatar paragraph={{ rows: 2 }} />
        </Card>
      ))}
    </div>
  );

  return (
    <div>
      <h1>用户列表</h1>
      <div className="user-list">
        {users.map(user => (
          <Card key={user.id} style={{ marginBottom: 16 }}>
            <h3>{user.name}</h3>
            <p>邮箱: {user.email}</p>
          </Card>
        ))}
      </div>
    </div>
  );
}

export default UserList;